<template>
  <div class="cars_list_wrap">
    <section class="car_item">
      <header>
        <h4 class="car_logo">
          <img class="image" src="../../../assets/logo.png" />
          <span>兰博基尼VUE</span>
        </h4>
        <span class="car_attr">这是用vue框架来 写的后台</span>
        <div class="car_info">0</div>
      </header>
    </section>
    <!-- 详情 -->
    <section class="car_item car_item_deatil" :style="'height:'+ height">
      <div class="scroll_wrap">
        <header>
          <h4 class="column">停车场</h4>
          <i class="close"></i>
        </header>
        <div class="car_detail_wrap">
          <div class="car_logon">
            <div class="logo">
              <img class="image" src="../../../assets/cars/Snipaste_2021-07-20_21-35-15.png" />
              <span>2019款</span>
            </div>
            <span class="name">新能源汽车</span>
          </div>
          <div class="car_image">
            <img class="image" src="../../../assets/cars/Snipaste_2021-07-20_21-20-27.png" />
          </div>
          <div class="car_info_number">
            <div class="car_number">123456</div>
            <div class="car_course">
              <sub>约</sub>
              <strong>500</strong>
              <sub>KM</sub>
            </div>
          </div>
        </div>
        <div class="energy_wrap">
          <div class="energy">
            <span class="energy_pr"></span>
            <span class="energy"></span>
          </div>
        </div>
        <p class="text text-cenent">111111111111111111111111111111111111</p>
        <ul class="cars_type_list">
          <li>
            <h4 class="name">日子车</h4>
            <span class="price">￥100、天</span>
          </li>
          <li>
            <h4 class="name">日子车</h4>
            <span class="price">￥100、天</span>
          </li>
          <li>
            <h4 class="name">日子车</h4>
            <span class="price">￥100、天</span>
          </li>
          <li>
            <h4 class="name">日子车</h4>
            <span class="price">￥100、天</span>
          </li>
          <li>
            <h4 class="name">日子车</h4>
            <span class="price">￥100、天</span>
          </li>
        </ul>
        <div class="clause">
          <span>条款</span>
          <i></i>
        </div>
      </div>
      <div class="order _btn">预约用车</div>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: String,
      default: "220px"
    }
  }
};
</script>

<style lang="scss" scoped>
.cars_list_wrap {
  .car_item {
    // width: 500px;
    height: 220px;
    padding: 30px 30px 0;
    background-color: #ffffff;
    border-radius: 24px;
    margin: auto;
    @include webkit(box-shadow, 0 0 30px 0 rgba(0, 0, 0, 0.2));
    @include webkit(box-sizing, boxder-box);
    .car_logo {
      float: left;
      .image {
        display: inline-block;
        height: 34px;
        margin-right: 34px;
        vertical-align: middle;
      }
      .name {
        font-size: 16px;
      }
    }
    .car_attr {
      float: right;
      line-height: 34px;
      opacity: 0.5;
    }
    .car_info {
      // background-color: orange;
      height: 100px;
      // padding-top: 34px;
    }
  }
  .scroll_wrap {
    height: 100%;
    overflow-y: auto;
  }
  .car_item_deatil {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    .column {
      position: relative;
      padding: 0px 0 20px;
      font-size: 20px;
      color: #34393f;
      border-bottom: 1px solid #e1e1e1;
    }
    .close {
      position: absolute;
      right: 26px;
      top: 25px;
      display: block;
      width: 26px;
      height: 26px;
      cursor: pointer;
      &:before,
      &:after {
        position: absolute;
        content: "";
        top: 50%;
        left: 50%;
        height: 20px;
        margin-left: -1px;
        // margin-top: 20px;
        border-left: 2px solid #999c9f;
      }
      &:before {
        @include webkit(transform, rotate(45deg));
      }
      &:after {
        @include webkit(transform, rotate(-45deg));
      }
    }
    .car_detail_wrap {
      height: 250px;
      // background-color: red;
      .car_logon {
        height: 30px;
        line-height: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: rgb(229, 203, 255);
        .logo {
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            margin-left: 10px;
          }
        }
        .name {
          font-size: 15px;
          color: $color_gray;
        }
      }
      .car_image {
        height: 200px;
        // background-color: royalblue;
        .image {
          width: 100%;
          height: 100%;
        }
      }
      .car_info_number {
        height: 20px;
        display: flex;
        justify-content: space-between;
        // background-color: rgb(217, 255, 181);
        .car_number {
          font-size: 24px;
        }
      }
    }
    .energy_wrap {
      padding: 15px;
      margin-top: 17px;
      border-radius: 100px;
      background-color: #fff;
      // @include webkit(box-shadow, 0 0 10px 0 raba(0, 0, 0, 0.1));
      .energy_pr {
        display: block;
        height: 8px;
        border-color: #e1e1e1;
        border-radius: 100px;
      }
      .energy {
        position: absolute;
        left: 0;
        top: 0;
        background-color: $color_blue;
        height: 100%;
        border-radius: 100px;
      }
    }
    .text {
      margin: 20px 0;
      color: $color_gray;
    }
    .cars_type_list {
      li {
        height: 43px;
        padding: 0 17px 0 20px;
        margin-bottom: 15px;
        font-size: 16px;
        line-height: 43px;
        border-radius: 10px;
        border: 2px solid #f3f3f3;
        background-color: #f3f3f3;
      }
      .name {
        float: left;
      }
      .price {
        float: right;
      }
    }
    .clause {
      i {
        float: right;
        width: 20px;
        height: 20px;
        border-radius: 100px;
        background-color: #ccc;
        &::before {
          content: "";
          display: block;
          width: 10px;
          height: 10px;
          margin: 5px 0 0 4px;
          border-left: 2px solid #fff;
          border-bottom: 2px solid #fff;
          @include webkit(transform, rotate(-45deg));
        }
      }
    }
    .order {
      position: absolute;
      left: 50%;
      margin-left: -120px;
      bottom: -42px;
    }
  }
}
</style>